<template>
  <div class="credentialsCar">
    <div class="credentialsCar-nav">
      <div class="credentialsCar-center">
        <p>租赁凭证</p>
        <p>合同编号：{{contract.code}}</p>
        <p>{{trueName}}于{{beginTime | formatDate}}至{{endTime | formatDate}}期间租{{address}}</p>
        <p>特此证明</p>
        <div id="qrcode"></div>
      </div>
    </div>
    <!-- <x-button type="primary" link="" @click.native="createCode">生成</x-button> -->
  </div>
</template>

<script>
import QRCode from 'js-qrcode'
export default {
  name: 'credentialsCar',
  data () {
    return {
      contract: '',
      link: '',
      credentialsData: '',
      trueName: '',
      beginTime: null,
      endTime: null,
      address: ''
    }
  },
  created () {
    this.credentialsData = JSON.parse(this.$route.query.myNumberPlate)
    this.trueName = JSON.parse(window.localStorage.getItem('userInfo')).trueName
    this.contract = this.credentialsData.contract
    this.beginTime = this.credentialsData.contract.beginTime
    this.endTime = this.credentialsData.contract.endTime
    this.link = this.credentialsData.link
    this.getHouse(this.contract.houseId)
    console.log(this.beginTime, this.endTime)
  },
  mounted () {
    this.createCode()
  },
  methods: {
    createCode () {
      var text = this.link
      var container = document.querySelector('#qrcode')
      var qr = new QRCode(container, {
        width: 256,
        height: 256,
        typeNumber: -1,
        correctLevel: 2,
        background: '#ccc',
        foreground: '#000000'
      })
      qr.make(text)
    },
    getHouse (id) {
      this.$axiosPosting(this.$api.getHousePersonsDetailById, {id}).then(res => {
        if (res.code === '0000') {
          this.address = res.data.address
        } else {
          this.$vux.toast.text(res.msg)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .credentialsCar {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    padding: 10px 15px;
    .credentialsCar-nav {
      width: 100%;
      border: 0.125rem solid #e9f1fd;
      border-radius: 6px;
      .credentialsCar-center {
        position: relative;
        padding: 0.8rem 1.12rem 0.5rem;
        p:nth-of-type(1) {
          font-size: 23px;
          color: #686868;
        }
        p:nth-of-type(2) {
          padding-top:6px;
          font-size: 12px;
          color: #ccc;
        }
        p:nth-of-type(3) {
          padding-top: 12px;
          padding-bottom: 18px;
          font-size: 13px;
          color: #838383;
        }
        p:nth-of-type(4) {
          padding-top: 50px;
          font-size: 15px;
          color: #838383;
        }
        #qrcode {
          position: absolute;
          bottom: 0.45rem;
          right: 0.45rem;
          width: 4.0rem;
          height: 4.0rem;
        }
      }
    }
  }
</style>
